<% 
/*******************************************************************************
 * Copyright (c) 2009, 2010 SOPERA GmbH
 * All rights reserved.
 * This program and the accompanying materials are made available
 * under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 ******************************************************************************/
%>
<%= dojoInclude(["dojo.event.*",
				 "dojo.collections.Store",
                 "dojo.widget.ContentPane",
                 "dojo.widget.TabContainer",
                 "dojo.widget.FilteringTable"]) %>

<%= hquStylesheets() %>

<style type="text/css">
	#${msgTableId} {
	    font-family: Lucida Grande, Verdana;
	    font-size: 11px;
	    width: 100%;
	    border: 1px solid #ccc;
	    border-collapse: collapse;

		*margin-left: 1px;
		cursor: default;
	}
	
	#${msgTableId} th {
	    font-weight: bold;
	    padding: 3px;
	    padding-left: 5px;
	    border-right: 1px solid #7bafff;
	    border-top: 1px solid #7bafff;
	}
	
	#${msgTableId} td {
	    padding: 3px;
	    font-weight: normal;
	    padding-left: 5px;
	    border-bottom: 1px solid #ddd;
	}

	#${msgTableId} tr.alt td {
	    background: #eef4fc;
	}

	.itemAvailRed {
		background: url("/images/icon_available_red.gif") no-repeat scroll center transparent;
	}
	
	.itemAvailGreen {
		background: url("/images/icon_available_green.gif") no-repeat scroll center transparent;
	}
	
	.itemAvailYellow {
		background: url("/images/icon_available_yellow.gif") no-repeat scroll center transparent;
	}
	
	.itemAvailError {
		background: url("/images/icon_available_error.gif") no-repeat scroll center transparent;
	}

</style>

<script type="text/javascript">
 	getDojo();
 	dojo11.require("dojo.data.ItemFileReadStore");
 	dojo11.require("dijit.dijit"); // optimize: load dijit layer
 	dojo11.require("dijit.Tree");
 	dojo11.require("dijit.ColorPalette");
 	dojo11.require("dijit.Menu");
 	dojo11.require("dijit.form.TextBox");
	dojo11.require("dijit.form.CheckBox");
	dojo11.require("dijit.form.ComboBox");
	dojo11.require("dijit.form.DateTextBox");
	dojo11.require("dojox.timing._base");
	dojo11.require("dojo.parser");

	var pageCount = 15;
	var currentAppId = '';
	var currentIsTree = true;
	var blockUpdate = false;
	var timer = new dojox11.timing.Timer(1000);
	var tabChild;

 	overlay.findPosX = function (obj) {
       var curleft = 0;
       if (obj.offsetParent) {
           while (obj.offsetParent) {
               curleft += obj.offsetLeft
               obj = obj.offsetParent;
           }
       }
       else if (obj.x)
       curleft += obj.x;
	var curleftsub = 0;
	//var obj2 = document.getElementById('bodyTabContainer');
	var obj2 = document.getElementById('_hqu_ContentPane_merticsTab');

	if (obj2.offsetParent) {
           while (obj2.offsetParent) {
               curleftsub += obj2.offsetLeft
               obj2 = obj2.offsetParent;
           }
       }
       else if (obj2.x)
       curleftsub += obj2.x;
  	curleft = curleft - curleftsub;
       return curleft;
       };

	overlay.findPosY = function (obj) {
	var curtop = 0;
       if (obj.offsetParent) {
           while (obj.offsetParent) {
               curtop += obj.offsetTop
               obj = obj.offsetParent;
           }
       }
       else if (obj.y)
       curtop += obj.y;

       var curtopsub = 0;
	//var obj2 = document.getElementById('bodyTabContainer');
	var obj2 = document.getElementById('_hqu_ContentPane_merticsTab');
	
	if (obj2.offsetParent) {
           while (obj2.offsetParent) {
               curtopsub += obj2.offsetTop
               obj2 = obj2.offsetParent;
           }
       }
       else if (obj2.y)
       curtopsub += obj.y;

       curtop = curtop - curtopsub;
       return curtop;
       };

	dojo11.addOnLoad(function(){
		timer.onTick = onTimerTick;

		//	dojo11.connect(null, "_hqu_${msgTableId}_setupPager", null, "onSetupPager");
	});

	dojo.addOnLoad(function() {
		var aaa = dojo.widget.byId("_hqu_ContentPane_filtersTab");
		dojo11.connect(aaa, "show", null, "onFiltersTabActivated");
		var bbb = dojo.widget.byId("_hqu_ContentPane_treeTab");
		dojo11.connect(bbb, "show", null, "onTreeTabActivated");

		var ccc = dojo.widget.byId('_hqu_ContentPane_merticsTab');
		dojo11.connect(ccc, "show", null, "onMetricTabActivated");
	});

	function setPageCount(data) {
		dojo11.byId('_hqu_${msgTableId}_pageNumbers').innerHTML += " / " + data.pageCount;
		setTableLabel(currentAppId);
	}

	function setTableLabel(str) {
		dojo11.byId('${msgTableId}_tableTitle').innerHTML = 'SOPERA Messages' + (str ? ' - ' + str : '');
	}

	function switchToTab(tabCont, tabPane) {
		dojo.widget.byId(tabCont).selectChild(dojo.widget.byId('_hqu_ContentPane_' + tabPane));
	}
	
	function updateTable() {
		if (!blockUpdate) {
			${msgTableId}_refreshTable();
			//switchToTab('bodyTabContainer', 'trackingTab');
		}
		timer.stop();
	}

	function restartTimer() {
		timer.stop();
		timer.start();
	}
	
	function setQueryArgs(tableId)
	{
		if (dijit11.byId("fltrLevelEn") == null)
			return {appId: escape(currentAppId)};

		var date1 = dijit11.byId('fltrDateFrom').getValue();
		var date2 = dijit11.byId('fltrDateTo').getValue();

		if (date1 > date2) {
			var t = date1;
			date1 = date2;
			date2 = t;
		}

		return {
			fltrLevel: (dijit11.byId('fltrLevelEn').checked) ? dijit11.byId('fltrLevel').getValue() : '',
			fltrCategory: (dijit11.byId('fltrCategoryEn').checked) ? dijit11.byId('fltrCategory').getValue() : '',
			fltrDescription: (dijit11.byId('fltrDescriptionEn').checked) ? dijit11.byId('fltrDescription').getValue() : '',
			fltrSbbId: (dijit11.byId('fltrSbbIdEn').checked) ? dijit11.byId('fltrSbbId').getValue() : '',
			fltrAppId: (dijit11.byId('fltrAppIdEn').checked) ? dijit11.byId('fltrAppId').getValue() : '',
			fltrMsgTypeId: (dijit11.byId('fltrMsgTypeIdEn').checked) ? dijit11.byId('fltrMsgTypeId').getValue() : '',
			fltrDateFrom: (dijit11.byId('fltrDateFromEn').checked && date1) ? date1.formatDate('yyyy-MM-dd') : '',
			fltrDateTo: (dijit11.byId('fltrDateToEn').checked && date2) ? date2.formatDate('yyyy-MM-dd') : '',
			appId: escape(currentAppId)
		};
	}

	function filterChanged(id) {
		blockUpdate = true;
		var text = dijit11.byId(id).getValue().toString();
		dijit11.byId(id + "En").setValue(text != "");
		blockUpdate = false;
		currentIsTree = false;
	}

	function filterBoxChanged(id) {
		updateTable();
		currentIsTree = false;
	}

	function resetFilterValues() {
		blockUpdate = true;
		dijit11.byId('fltrLevel').setValue('');
		dijit11.byId('fltrCategory').setValue('');
		dijit11.byId('fltrDescription').setValue('');
		dijit11.byId('fltrSbbId').setValue('');
		dijit11.byId('fltrAppId').setValue('');
		dijit11.byId('fltrMsgTypeId').setValue('');
		try { dijit11.byId('fltrDateFrom').setValue(''); }
		catch(err) { }
		try { dijit11.byId('fltrDateTo').setValue(''); }
		catch(err) { }

		dijit11.byId('fltrLevelEn').setValue(false);
		dijit11.byId('fltrCategoryEn').setValue(false);
		dijit11.byId('fltrDescriptionEn').setValue(false);
		dijit11.byId('fltrSbbIdEn').setValue(false);
		dijit11.byId('fltrAppIdEn').setValue(false);
		dijit11.byId('fltrMsgTypeIdEn').setValue(false);
		dijit11.byId('fltrDateFromEn').setValue(false);
		dijit11.byId('fltrDateToEn').setValue(false);
		blockUpdate = false;
	}

	function onFiltersTabActivated() {
		currentAppId = '';
		updateTable();
		//tabChild = dojo.widget.byId('_hqu_ContentPane_merticsTab');
		switchToTab('bodyTabContainer', 'trackingTab');
		//dojo.widget.byId('bodyTabContainer').removeChild(tabChild);
		clearMetricPane();
	}

	function onTreeTabActivated() {
		resetFilterValues();
		updateTable();
		//if(tabChild != null) dojo.widget.byId('bodyTabContainer').addChild(tabChild, 0);
	}

	function onMetricTabActivated() {
		switchToTab('treeFiltTabContainer', 'treeTab');
	}

	function onTimerTick() {
		timer.stop();
		updateTable();
	}

	function clearMetricPane() {
		document.getElementById('metricView').style.display = 'none';
		document.getElementById('metricViewInfo').style.display = 'block';
	}

</script>
<div>
		<div style='float: left; width: 300px;'>
			<% dojoTabContainer(id:'treeFiltTabContainer', style:'width: 100%; height:450px;') { %>
			<% dojoTabPane(id:'treeTab', label:'Tree') { %>
				<div style='overflow:auto; height: 426px; background-color: #EEE;'>
				<div dojo11Type="dojo.data.ItemFileReadStore" jsId="continentStore" url="/<%=urlFor(action:'getTreeData')%>"></div>
				<div dojo11Type="dijit.Tree" id="mytree" store="continentStore" query="{type:'*'}" openOnClick="false" openOnDblClick="true">
					<script type="dojo/method" event="getIconClass" args="item, opened">
						if (!item)
							return (opened ? "dijitFolderOpened" : "dijitFolderClosed");

						switch (this.model.store.getValue(item, "type")) {
							case "serviceGreen":
								return "itemAvailGreen";

							case "serviceYellow":
								return "itemAvailYellow";

							case "serviceRed":
								return "itemAvailRed";

							case "serverGreen":
								return "itemAvailGreen";

							case "serverYellow":
								return "itemAvailYellow";

							case "serverRed":
								return "itemAvailRed";

							case "root":
								return "itemAvailGreen";

							default:
								return "itemAvailError";
						}
					</script>
					<script type="dojo/method" event="getTooltip" args="item,opened">
						return item && ("Tooltip for " + this.model.store.getLabel(item));
					</script>
					<script type="dojo/method" event="onClick" args="item">
						currentAppId = this.model.store.getValue(item, "appid");
						if(this.model.store.getValue(item, "ctype") != undefined)
						{
							currentAppId = "Categories can't have messages";
							switchToTab('bodyTabContainer', 'merticsTab');	
						}
						if(this.model.store.getValue(item, "sopType") == "SOPERA Operation") 
						{
							currentAppId = "Operation can't have messages";
							switchToTab('bodyTabContainer', 'merticsTab');
						}
						if(this.model.store.getValue(item, "type").indexOf('server') >= 0)
						{
							currentAppId = "Server can't have messages";
							switchToTab('bodyTabContainer', 'merticsTab');
						}
						if(this.model.store.getValue(item, "type") == "root")
						{
							document.getElementById('metricView').style.display = 'none';
							document.getElementById('metricViewInfo').style.display = 'block';
							switchToTab('bodyTabContainer', 'trackingTab');
						}
						else
						{
							document.getElementById('metricView').style.display = 'block';
							document.getElementById('metricViewInfo').style.display = 'none';
							overlay.times.clear();
							document.getElementById('chartFrame').src = "/resource/common/monitor/visibility/IndicatorCharts.do?eid=" + this.model.store.getValue(item, "category") +"%3A" + this.model.store.getValue(item, "eid") + "&view=Default&action=fresh";
							if(this.model.store.getValue(item, "ctype") != undefined) document.getElementById('chartFrame').src += "&ctype=" + this.model.store.getValue(item, "ctypecategory") +"%3A" + this.model.store.getValue(item, "ctype")
							document.getElementById('availability').href = "/resource/common/monitor/visibility/ViewDesignatedChart.do?eid=" + this.model.store.getValue(item, "category") +"%3A" + this.model.store.getValue(item, "eid")
							if(this.model.store.getValue(item, "ctype") != undefined) document.getElementById('availability').href += "&ctype=" + this.model.store.getValue(item, "ctypecategory") +"%3A" + this.model.store.getValue(item, "ctype")
							//document.getElementById('bodyTabContainer').style.display = 'none';
							dojo11.xhrGet( {
								url: "/<%=urlFor(action:'getMetricData')%>?rid=" + this.model.store.getValue(item, "eid"), 
							    	handleAs: "json-comment-filtered",
								timeout: 10000,
								load: function(response, ioArgs) {
									startDate = "";
									finishDate = "";
									sumAvailability = 0.0;
									for(i = 0; i < 60; i++)
									{
										if((parseFloat(response.values[i].m) >= 0) && (parseFloat(response.values[i].m) <= 1)) sumAvailability += parseFloat(response.values[i].m);
										if(startDate == "") startDate = response.values[i].dt.toString();
										finishDate = response.values[i].dt.toString();
										if(parseFloat(response.values[i].m) == 1)
										{
											dojo11.byId("metricImg" + i.toString()).src = "/images/timeline_green.gif";
										}
										else if(parseFloat(response.values[i].m) == 0)
										{
											dojo11.byId("metricImg" + i.toString()).src = "/images/timeline_red.gif";
										}
										else if(parseFloat(response.values[i].m) == 2)
										{
											dojo11.byId("metricImg" + i.toString()).src = "/images/timeline_unknown.gif";
										}
										else
										{
											dojo11.byId("metricImg" + i.toString()).src = "/images/timeline_yellow.gif";
										}
										overlay.times.push(response.values[i].dt);
									}
									sumAvailability = (sumAvailability / response.values.length) * 100;
									dojo11.byId("availability").innerHTML = parseInt(sumAvailability).toString() + "% Availability";
									dojo11.byId("startMetricDate").innerHTML = startDate;
									dojo11.byId("finishMetricDate").innerHTML = finishDate;
									return response;
							       },
								error: function(response, ioArgs) {
					    			alert(response+' '+ioArgs);
								return response;
								}
							} );
						}
						${msgTableId}_refreshTable();
						currentIsTree = true;
					</script>
				</div>
			</div>
			<% } %>
			<% dojoTabPane(id:'filtersTab', label:'Filters') { %>
				<div id='filters' style='overflow:auto; padding: 5px; height: 426px; background-color: #EEE;'>
					<table>
					<tr><td>Level:</td><td><select dojo11Type="dijit.form.ComboBox" style="width: 200px" id="fltrLevel" onchange="filterChanged('fltrLevel'); updateTable();" onkeyup="filterChanged('fltrLevel'); restartTimer();">
						<option selected="selected"></option>
						<% listLevel.each({ %>
							<option>${it}</option>
						<% }); %>
					</select></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrLevelEn" onchange="filterBoxChanged('fltrLevel');" /></td>
					</tr>
					<tr><td>Category:</td>
					<td><select dojo11Type="dijit.form.ComboBox" style="width: 200px" id="fltrCategory" onchange="filterChanged('fltrCategory'); updateTable();" onkeyup="filterChanged('fltrCategory'); restartTimer();">
						<option selected="selected"></option>
						<% listCategory.each({ %>
							<option>${it}</option>
						<% }); %>
					</select></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrCategoryEn" onchange="filterBoxChanged('fltrCategory');" /></td>
					</tr>
					<tr><td>SbbId:</td>
					<td><select dojo11Type="dijit.form.ComboBox" style="width: 200px" id="fltrSbbId" onchange="filterChanged('fltrSbbId'); updateTable();" onkeyup="filterChanged('fltrSbbId'); restartTimer();">
						<option selected="selected"></option>
						<% listSbbId.each({ %>
							<option>${it}</option>
						<% }); %>
					</select></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrSbbIdEn" onchange="filterBoxChanged('fltrSbbId');" /></td>
					</tr>
					<tr><td>AppId:</td>
					<td><select dojo11Type="dijit.form.ComboBox" style="width: 200px" id="fltrAppId" onchange="filterChanged('fltrAppId'); updateTable();" onkeyup="filterChanged('fltrAppId'); restartTimer();">
						<option selected="selected"></option>
						<% listAppId.each({ %>
							<option>${it}</option>
						<% }); %>
					</select></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrAppIdEn" onchange="filterBoxChanged('fltrAppId');" /></td>
					</tr>
					<tr><td>Description:</td>
					<td><input type="text" dojo11Type="dijit.form.TextBox" style="width: 200px" id="fltrDescription" onkeyup="filterChanged('fltrDescription'); restartTimer();" /></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrDescriptionEn" onchange="filterBoxChanged('fltrDescription');" /></td>
					</tr>
					<tr><td>MsgTypeId:</td>
					<td><input type="text" dojo11Type="dijit.form.TextBox" style="width: 200px" id="fltrMsgTypeId" onkeyup="filterChanged('fltrMsgTypeId'); restartTimer();" /></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrMsgTypeIdEn" onchange="filterBoxChanged('fltrMsgTypeId');" /></td>
					</tr>
					<tr><td>Date from:</td>
					<td><input type="text" dojo11Type="dijit.form.DateTextBox" constraints={datePattern:'dd/MM/yy'} style="width: 200px" id="fltrDateFrom" onchange="filterChanged('fltrDateFrom'); updateTable();" onkeyup="filterChanged('fltrDateFrom'); restartTimer();" /></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrDateFromEn" onchange="filterBoxChanged('fltrDateFrom');" /></td>
					</tr>
					<tr><td>Date to:</td>
					<td><input type="text" dojo11Type="dijit.form.DateTextBox" constraints={datePattern:'dd/MM/yy'} style="width: 200px" id="fltrDateTo" onchange="filterChanged('fltrDateTo'); updateTable();" onkeyup="filterChanged('fltrDateTo'); restartTimer();" /></td>
					<td><input type="checkbox" dojo11Type="dijit.form.CheckBox" id="fltrDateToEn" onchange="filterBoxChanged('fltrDateTo');" /></td>
					</tr><tr><td></td><td>
					<button dojo11Type="dijit.form.Button" onclick="${msgTableId}_refreshTable();">Apply</button>
					<button dojo11Type="dijit.form.Button" onclick="resetFilterValues(); ${msgTableId}_refreshTable();">Reset</button>
					</td><td></td></tr>
					</table>
				</div>
			<% } %>
		<% } %>
	</div>
	<div style='background-color: #fafdf9; margin: 5px 0px 5px 310px; padding: 0px;'>
		<% dojoTabContainer(id:'bodyTabContainer', style:'width: 100%; height:450px;') { %>
			<% dojoTabPane(id:'trackingTab', label:'Tracking') { %>
				<%= dojoTable(id: "${msgTableId}", title: 'SOPERA Messages',  refresh:600, url:urlFor(action:'getTableData'), schema:sopMsgShema, numRows:15)  %>
			<% } %>
			<% dojoTabPane(id: 'merticsTab', label:'Metrics') { %>
				<div id='metricViewInfo' style="width:100%; text-align: center;"><h1>Please, Select node in tree<h1></div>
				<div id='metricView' style="display: none; width:100%">
	<table width="100%" cellpadding="2" cellspacing="0" border="0">
	<tr>
        <td colspan="2">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="8">
                        <img src="/images/timeline_ul.gif" height="10">
                    </td>
			<script type="text/javascript">
			for(i=0; i < 60; i++)
			{
				document.write('<td width="9">');
				document.write('<div onmousedown="overlay.moveOverlay(this);overlay.showTimePopupTopMetricChart(' + i.toString() + ', event)">');
				document.write('<img id="metricImg' + i.toString() + '" src="/images/timeline_green.gif" height="10" width="9" border="0">');
				document.write('</div>');
				document.write('</td>');
			}
			</script>
                    <td width="10" align="left">
                        <img src="/images/timeline_ur.gif" height="10">
                    </td>
                    <td class="BoldText" style="padding-left: 4px;">
                        <a id="availability" href="about:blank"></a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="charttop" style="padding-top: 1px; padding-bottom: 1px; z-index: 0; width:100%">
                <iframe id="chartFrame" src="about:blank"
                    marginwidth="0" marginheight="0" frameborder="no" scrolling="auto" style="border-style: none;
                    height: 370px; width: 100%;"></iframe>
            </div>
            <div id="chartbottom">
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">

            <script type="text/javascript"> 
  var semiIndex = imagePath.indexOf(";");
  if (semiIndex != -1)
    imagePath = imagePath.substring(0, semiIndex);
 

            </script>

            <div id="overlay" class="overlay">
            </div>     
<table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td width="10">
                        <div id="timetop">
                        </div>
                        <img src="/images/timeline_ll.gif" height="10">
                    </td>
                    <script type="text/javascript"> 
				for(i=0; i < 60; i++)
				{
					document.write('<td width="9">');
					document.write('<div id="timePopup_' + i.toString() + '" onmouseover="overlay.delayTimePopup(' + i.toString() + ')" onmousedown="overlay.moveOverlay(this)" onmouseout="overlay.curTime = null">');
					document.write('<img src="/images/timeline_off.gif" height="10" width="9" onmouseover="imageSwap(this, imagePath + ');
					document.write("'timeline', '_on'");
					document.write(')" onmouseout="imageSwap(this, imagePath + ');
					document.write("'timeline', '_off'");
					document.write(');" onmousedown="imageSwap(this, imagePath + ');
					document.write("'timeline', '_down'");
					document.write(')"></div></td>');	
				}			
		      	</script>
                    <td width="100%">
                        <img src="/images/timeline_lr.gif" height="10">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td colspan="30.0" valign="top">
                        <span id="startMetricDate"></span>
                        <div id="timePopup" class="timepopup" onmousedown="overlay.hideTimePopup()">
                        </div>
                    </td>
                    <td colspan="30.0" align="right" valign="top">
                        <span id="finishMetricDate"></span>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td colspan="62" valign="top">
                        <a name="eventDetail"></a>
                        <div id="eventDetailTable" style="position: relative; height: 230px; display: none;">
                            <div class="eventDetails">
                                <table cellspacing="0" width="100%">
                                    <tr>
                                        <td id="ALLEventsTab" width="10%" class="eventsTabOn" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('ALL')" class="black">All</a>
                                        </td>
                                        <td id="ERREventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('ERR')" class="red">Error</a>
                                        </td>
                                        <td id="WRNEventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('WRN')" class="yellow">Warn</a>
                                        </td>
                                        <td id="INFEventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('INF')" class="green">Info</a>
                                        </td>
                                        <td id="DBGEventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('DBG')" class="green">Debug</a>
                                        </td>
                                        <td id="ALREventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('ALR')" class="red">HQ Alerts</a>
                                        </td>
                                        <td id="CTLEventsTab" width="10%" class="eventsTab" nowrap="true">
                                            <a href="#eventDetail" onclick="filterEventsDetails('CTL')" class="navy">Control Actions</a>
                                        </td>
                                        <td valign="top" style="text-align: right; border-bottom: solid; border-width: 1px;
                                            border-color: #000000;">
                                            <img src="/images/dash-icon_delete.gif" onclick="new Effect.Fade(dojo.byId('eventDetailTable'))">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="8">
                                            <div id="eventsSummary" class="eventsSummary">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
		</div>
			<% } %>
		<% } %>
	</div>
</div>

<script type="text/javascript">
	${msgTableId}_addUrlXtraCallback(setQueryArgs);
	${msgTableId}_addRefreshCallback(setPageCount);
	document.getElementById("_hqu_ContentPane_merticsTab").style.overflow = 'hidden';
</script>
